<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>欢迎页面-X-admin2.2</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="../css/admin/font.css">
  <link rel="stylesheet" href="../css/admin/xadmin.css">
  <script src="../js/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../js/xadmin.js"></script>
  <script type="text/javascript" src="../js/checkAdmin.js"></script>
</head>

<body>
  
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header demoTable">
            <button class="layui-btn" lay-event="add" onclick="xadmin.open('添加用户', 'admin-add.html', 560, 300)"><i
                class="layui-icon"></i>添加</button>
          </div>

          <!-- 表格 -->
          <table class="layui-table layui-form" lay-filter="test" id="tab">
            <thead>
              <tr>
                <th lay-data="{ field: 'id', title: 'ID', align: 'center'}">ID</th>
                <th lay-data="{ field: 'account', title: '账号', align: 'center'}">账号</th>
                <th lay-data="{fixed: 'right', title: '操作', align: 'center', width: 270,
                 toolbar: '#barDemo'}">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="id"></td>
                <td id="account"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- 操作按钮 -->
  <script type="text/html" id="barDemo">
  <button class="layui-btn layui-btn layui-btn-xs" id="editPwd" lay-event="editPwd" >
    <i class="layui-icon">&#xe642;</i>修改密码</button>
  <!-- <button class="layui-btn-danger layui-btn layui-btn-xs" id="del" lay-event="del" href="javascript:;">
    <i class="layui-icon">&#xe640;</i>删除</button> -->
  </script>

</body>
<script>
  layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
    var laydate = layui.laydate //日期
      , laypage = layui.laypage //分页
      , layer = layui.layer //弹层
      , table = layui.table //表格
      , carousel = layui.carousel //轮播
      , upload = layui.upload //上传
      , element = layui.element //元素操作
      , slider = layui.slider //滑块
      , $ = layui.jquery
      , form = layui.form; // 表单

    // 加载中动画
    // var index = layer.load(2, { shade: false, });

    // 表格渲染
    // table.render({
    //   elem: '#tab'
    //   , id: 'tableId'
    //   , url: "http://127.0.0.1:8001/after/admin/showAll"
    //   , method: 'post'
    //   , limit: 10 //每页默认显示的数量
    //   , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90]
    //   , response: { statusCode: 200 } //重新规定成功的状态码为 200，table 组件默认为 0
    //   , page: true //开启分页
    //   , cellMinWidth: 10 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    //   , skin: 'line' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
    //   , cols: [[
    //     { field: 'id', title: 'ID', align: 'center', templet: '' }  //templet:自定义模板,可以用作处理后台的数据再进行展示
    //     , { field: 'account', title: '账号', align: 'center', templet: '' }
    //     , { fixed: 'right', title: '操作', align: 'center', width: 270, toolbar: '#barDemo' }
    //   ]]
    //   , done: function (res, curr, count) {
    //     layer.close(index)
    //   }
    // });

    //转换静态表格
    table.init('test', {
      height: 100 //设置高度
      , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
      //支持所有基础参数
    });

    var storage = window.sessionStorage;
    // 先将json字符串转化为对象
    var obj = JSON.parse(storage.getItem('admin'));
    $('tr td .laytable-cell-1-0-0').append(obj.id)
    $('tr td .laytable-cell-1-0-1').append(obj.account)







    //监听table中的工具栏,tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    table.on('tool(test)', function (obj) {
      // 获取当前行
      var data = obj.data;
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象

      // 判断操作  使用lay-event
      switch (obj.event) {

        /* 修改密码 */
        case 'editPwd':
          // 使用sessionStorage传递本行数据
          var storage = window.sessionStorage;
          // 想要用sessionStorage存储对象，必须先将对象转化为json字符串
          var account = $('tr td .laytable-cell-1-0-1').html()
          storage.setItem('lineData', account);
          var bObj = document.getElementById("editPwd");
          bObj.onclick = editPwd();
          function editPwd() {
            xadmin.open('修改密码', 'admin-editPwd.html', 550, 350)
          }
          break;
        /* 注销单个用户 */
        case 'del':
          //发异步注销用户
          $.ajax({
            url: "http://127.0.0.1:8001/after/admin/deleteByAccount"
            , type: "post"
            , data: { 'account': data.account }
            , success: function (datas) {
              if (datas.data != null) {
                layer.alert('删除成功', { icon: 6 }
                  , function () {
                    window.location.reload();
                  });
                return false;
              }
              layer.msg('操作失败', { time: 1000 });
              return false;
            }
          });
          break;
      }
    });



  });



</script>

</html>